<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户查询界面</title>
    <link href="../../css/Hui.css" rel="stylesheet" type="text/css">
    <!-- 引入jQuery UI CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        /* 整体页面布局和通用样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 表头样式 */
        th {
            background-color: #f2f2f2;
            padding: 8px;
            text-align: left;
        }

        /* 表格行样式 */
        tr {
            border-bottom: 1px solid #ccc;
            cursor: pointer;
        }

        tr:hover {
            background-color: #f4f4f4;
        }

        td {
            padding: 8px;
        }

        /* 表单和按钮样式 */
        .form-item {
            margin-bottom: 10px;
        }

        .form-label {
            display: inline-block;
            width: 100px;
            margin-right: 10px;
        }

        .form-input {
            padding: 6px;
            border: 1px solid #ccc;
            border-radius: 3px;
            width: 200px;
        }

        .button {
            padding: 8px 15px;
            background-color: #f4f4f4;
            border: 1px solid #ccc;
            border-radius: 3px;
            cursor: pointer;
        }

        .button-add {
            margin-bottom: 15px;
        }

        .button-query {
            margin-left: 10px;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            border-radius: 5px;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .modal-title {
            font-size: 18px;
            font-weight: bold;
        }

        .close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover {
            color: black;
        }

        .modal-footer {
            margin-top: 20px;
            text-align: right;
        }

        /* 页面标题样式 */
        .page-title {
            font-size: 20px;
            font-weight: bold;
            margin: 20px 0;
        }

        /* 主容器样式 */
        .container {
            padding: 20px;
        }
    </style>
</head>

<body>
<!-- 页面标题 -->
<div class="H-padding-vertical-bottom-10"></div>
<header class="H-header H-theme-background-color9 H-padding-vertical-top-25" id="header">
    <span onclick="goBack()" class="H-icon H-position-relative H-display-inline-block H-float-left H-vertical-middle H-theme-font-color-white H-padding-horizontal-left-5 H-z-index-100">
			<i class="H-iconfont H-icon-target-back H-font-size-18 H-vertical-middle"></i>
		</span>
    <div class="H-header-title H-center-all H-font-size-18 H-text-show-row-1 H-theme-font-color-white
            H-position-absolute H-width-100-percent">用户查询界面</div>
</header>
<div class="H-padding-vertical-bottom-10"></div>

<!-- 主容器 -->
<div class="container">
    <!-- 添加按钮 -->
    <button class="button button-add" onclick="showAddUserModal()">添加用户</button>

    <!-- 查询表单 -->
    <div class="form-item">
        <input type="text" class="form-input" id="mobile1" placeholder="请输入手机号码">
        <button class="button button-query" onclick="queryUsers()">查询</button>
    </div>

    <!-- 用于显示用户记录的表格 -->
    <table id="userTable" style="width: 100%; margin-top: 20px;">
        <thead>
        <tr>
            <th>商户</th>
            <th>手机号码</th>
            <th>到期时间</th>
        </tr>
        </thead>
        <tbody>
        <!-- 这里将通过JavaScript动态填充数据 -->
        </tbody>
    </table>
</div>

<!-- 添加用户模态框 -->
<div id="addUserModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="modal-title">添加用户</span>
            <span class="close" onclick="closeModal('addUserModal')">&times;</span>
        </div>
        <div class="form-item">
            <label class="form-label" for="realname">商户名：</label>
            <input type="text" class="form-input" id="realname" placeholder="请输入用户名">
        </div>
        <div class="form-item">
            <label class="form-label" for="mobile">手机号码：</label>
            <input type="text" class="form-input" id="mobile" placeholder="请输入手机号码">
        </div>
        <div class="form-item">
            <label class="form-label" for="expiretime">到期时间：</label>
            <input type="date" class="form-input" id="expiretime" placeholder="请选择到期时间">
        </div>
        <div class="modal-footer">
            <button class="button" onclick="addUser()">提交添加</button>
            <button class="button" onclick="closeModal('addUserModal')">取消</button>
        </div>
    </div>
</div>

<!-- 编辑用户模态框 -->
<div id="editUserModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="modal-title">编辑用户</span>
            <span class="close" onclick="closeModal('editUserModal')">&times;</span>
        </div>
        <div class="form-item">
            <label class="form-label" for="editUsername">商户：</label>
            <input type="text" class="form-input" id="editUsername" placeholder="请输入用户名">
        </div>
        <div class="form-item">
            <label class="form-label" for="editMobile">手机号码：</label>
            <input type="text" class="form-input" id="editMobile" placeholder="请输入手机号码">
        </div>
        <div class="form-item">
            <label class="form-label" for="editExpiretime">到期时间：</label>
            <input type="text" class="form-input" id="editExpiretime" placeholder="请选择到期时间">
        </div>
        <input type="hidden" id="editUserId">
        <div class="modal-footer">
            <button class="button" onclick="updateUser()">保存修改</button>
            <button class="button" onclick="closeModal('editUserModal')">取消</button>
        </div>
    </div>
</div>

<script src="../../script/H.js" type="text/javascript"></script>
<script src="../../script/jquery-3.7.1.min.js" type="text/javascript"></script>
<!-- 引入jQuery UI JS -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="../../api.js" type="text/javascript"></script>
<script>

    $(function() {
        queryUsers();
        // $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
        // // 初始化添加表单的日期选择器
        // $("#expiretime").datepicker({
        //     dateFormat: "yy-mm-dd",
        //     minDate: 0 // 限制只能选择今天及以后的日期
        // });
        //
        // // 初始化编辑表单的日期选择器
        // $("#editExpiretime").datepicker({
        //     dateFormat: "yy-mm-dd",
        //     minDate: 0
        // });
    });

    // 显示添加用户模态框
    function showAddUserModal() {
        // 清空表单
        $('#realname, #mobile, #expiretime').val('');
        $('#addUserModal').show();
    }

    // 关闭模态框
    function closeModal(modalId) {
        $('#' + modalId).hide();
    }

    // 查询用户函数
    function queryUsers() {
        var mobile = $('#mobile1').val();
        // if (mobile === '') {
        //     alert('请输入手机号码');
        //     return;
        // }
        var baseServer = ""; // 实际需根据后端提供地址修改
        $.ajax({
            url: '/app/queryUserList',
            type: 'POST',
            //contentType: 'application/json;charset=utf-8',
            dataType: "json",
            data: {
                mobile: mobile
            },
            success: function (data) {
                if (data.code === 0) {
                    // 清空表格
                    $('#userTable tbody').empty();
                    var users = data.data;
                    users.forEach(function (user) {
                        $('#userTable tbody').append(`
                            <tr data-id="${user.userId}">
                                <td>${user.realname}</td>
                                <td>${user.mobile}</td>
                                <td>${user.expiretime}</td>
                            </tr>
                        `);
                    });
                    // 绑定点击事件到每一行
                    $('#userTable tbody tr').click(function () {
                        var userId = $(this).attr('data-id');
                        showEditUserModal(userId);
                    });
                } else {
                    alert(data.message);
                }
            },
            error: function (xhr, type) {
                alert('网络错误，请稍后再试');
            }
        });
    }

    // 添加用户函数
    function addUser() {
        var realname = $('#realname').val();
        var mobile = $('#mobile').val();
        var expiretime = $('#expiretime').val();

        if (realname === '' || mobile === '' || expiretime === '') {
            alert('请填写完整信息');
            return;
        }

        var baseServer = ""; // 实际需根据后端提供地址修改
        $.ajax({
            url: '/app/addUser',
            type: 'POST',
            contentType: 'application/json;charset=utf-8',
            dataType: "json",
            data: JSON.stringify({
                realname: realname,
                mobile: mobile,
                expiretime: expiretime
            }),
            success: function (data) {
                if (data.code === 0) {
                    alert('用户添加成功');
                    $('#addUserModal').hide();
                    // 重新查询用户列表
                    queryUsers();
                } else {
                    alert(data.message);
                }
            },
            error: function (xhr, type) {
                alert('网络错误，请稍后再试');
            }
        });
    }

    // 显示编辑用户模态框
    function showEditUserModal(userId) {
        // 通过API获取用户详情
        $.ajax({
            url: '/app/getUserDetailUrl',
            type: 'POST',
            //contentType: 'application/json;charset=utf-8',
            dataType: "json",
            data: { id: userId },
            success: function(data) {
                if (data.code === 0) {
                    var user = data.data[0];
                    // 填充表单
                    $('#editUserId').val(user.userId);
                    $('#editUsername').val(user.realname);
                    $('#editMobile').val(user.mobile);
                    $('#editExpiretime').val(user.expiretime);

                    // 显示模态框
                    $('#editUserModal').show();
                } else {
                    alert(data.message);
                }
            },
            error: function(xhr, type) {
                alert('网络错误，请稍后再试');
            }
        });
    }

    // 更新用户信息函数
    function updateUser() {
        var userId = $('#editUserId').val();
        var realname = $('#editUsername').val();
        var mobile = $('#editMobile').val();
        var expiretime = $('#editExpiretime').val();

        if (!realname || !mobile || !expiretime) {
            alert('请填写完整信息');
            return;
        }

        var baseServer = ""; // 实际需根据后端提供地址修改

        $.ajax({
            url: '/app/updateUser',
            type: 'POST',
            contentType: 'application/json;charset=utf-8',
            dataType: "json",
            data: JSON.stringify({
                userId: userId,
                realname: realname,
                mobile: mobile,
                expiretime: expiretime
            }),
            success: function(data) {
                if (data.code === 0) {
                    alert('用户信息更新成功');
                    $('#editUserModal').hide();
                    // 重新查询用户列表
                    queryUsers();
                } else {
                    alert(data.message);
                }
            },
            error: function(xhr, type) {
                alert('网络错误，请稍后再试');
            }
        });
    }
</script>
</body>
</html>